<template lang='pug'>
.home
  .header
    img(src="../../src/assets/img/home-header.png", alt="alt")
  .content
    p 推荐玩乐
    .listBox(
      @touchstart="onTap",
      @touchmove="onMove",
      @touchend="onEnd",
      :style="{ left: listX + 'px', transition: listBler ? '.4s' : 'none' }",
      ref="listBox"
    )
      xBox(v-for="d in statusList", :list="d", ref="xBox")
</template>
 
<script>
import xBox from "../components/home-listxBox.vue";
import axios from "axios";
import Vue from "vue";
Vue.prototype.$http = axios;
export default {
  data() {
    return {
      statusList: null,
      listX: 0.15, //列表移动位置
      pageX: null, //移动了多少
      endto: 0, //最后停止移动的位置
      listBler: false,
      docWidth: document.body.clientWidth,
    };
  },
  components: {
    xBox,
  },
  methods: {
    onTap({ changedTouches }) {
      this.listBler = false;
      console.log(changedTouches[0].clientX);
      this.pageX = changedTouches[0].clientX - this.endto;
    },
    onMove({ changedTouches: e }) {
      this.listX = (this.pageX - e[0].clientX) * -1; //计算拖动了多少
    },
    onEnd() {
      this.endto = this.$refs.listBox.offsetLeft;
      console.log(this.$refs.listBox.offsetLeft);
      if (this.$refs.listBox.offsetLeft > 0) {
        console.log("超出了");
        this.listBler = true;
        this.listX = 0;
        this.endto = 0;
        // this.pageX = 0;
        console.log(this.$refs.listBox.offsetWidth - this.docWidth);
      } else if (
        this.$refs.listBox.offsetLeft <
        (this.$refs.listBox.offsetWidth - this.docWidth) * -1
      ) {
        this.listBler = true;
        console.log("超出了");
        this.endto = (this.$refs.listBox.offsetWidth - this.docWidth) * -1;
        // this.pageX = 0;
        this.listX = (this.$refs.listBox.offsetWidth - this.docWidth) * -1;
      }
    },
  },

  computed: {
    setListX() {
      return 1;
    },
  },
  created() {
    // 初始化接收数据
    // 用于渲染旅游列表
    this.$http
      .get("/get-play-list")
      .then(({ data }) => {
        console.log(data);
        this.statusList = data;
      });
  },
};
</script>
 
<style scoped lang="sass">
.home
  width: 100%
  .header
    width: 100%
    img
      width: 100%
  .content
    width: 100%
    position: relative
    box-sizing: border-box
    padding: 0 .2rem
    overflow: hidden
    height: 3.28rem
    p
      width: 100%
      height: .3rem
      line-height: .3rem
      text-align: left
      margin: 0 auto
      font-weight: 600
    .listBox
      // width: 
      height: 2.88rem
      margin-top: .15rem
      // overflow: hidden
      display: flex
      position: absolute
      // transition: .4s
      // left: 0
      // top: 0
</style>